<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折线图</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/h5polyline.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei UI';
        }
    </style>
</head>
<body>

<script src="js/jquery.min.js"></script>
<script src="js/h5componentbase.js"></script>
<script src="js/h5componentpolyline.js"></script>
<script>
    var cfg = {
        type: 'polyline',
        width: '720',
        height: '400',
        data: [
            ['Javascript', .4, '#ff7676'],
            ['HTML/CSS', .2,],
            ['CSS3', .1,],
            ['HTML5', .2,],
            ['Bootstrap', .3565],
            ['AngularJs', .052,],
            ['jQuery', .09,]
        ],
        animateIn: {},
        animateOut: {},
        center: true
    };

    var point = new H5ComponentPolyline('bar', cfg);
    $('body').append(point);

    var leave = true;
    $('body').click(function () {
        leave = !leave
        $('.h5_component').trigger(leave ? 'onLeave' : 'onLoad');
    });
</script>
</body>
</html>